<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="renderer" content="webkit">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <link rel="icon" id="hpyLogo">
  <title id="name">正在加载...</title>

  <script src="/tailwindcss.js"></script>
  <style>
    html, body, #app { height: 100%; margin: 0; padding: 0; }

    /* --- 1. 定义颜色变量 --- */
    /* 默认 (浅色主题) */
    :root {
      --loading-bg: #f9fafb; /* 浅灰色背景 */
      --hp-text-color: #dc2626; /* 红色 */
      --vision-text-color: #111827; /* 深灰色 */
      --subtext-color: #4b5563; /* 中灰色 */
      --underline-color: #374151; /* 较深的灰色 */

      /* 浅色主题下的发光动画 */
      --hp-glow-animation: glow-red-light 1.5s ease-in-out infinite alternate;
      --vision-glow-animation: glow-dark-light 2s ease-in-out infinite alternate;
    }

    /* 深色主题下的变量覆盖 */
    @media (prefers-color-scheme: dark) {
      :root {
        --loading-bg: #000; /* 黑色背景 */
        --hp-text-color: #d71820; /* 亮红色 */
        --vision-text-color: #e5e7eb; /* 亮灰色 */
        --subtext-color: #9ca3af; /* 浅灰色 */
        --underline-color: #9ca3af;

        /* 深色主题下的发光动画 */
        --hp-glow-animation: glow-red-dark 1.5s ease-in-out infinite alternate;
        --vision-glow-animation: glow-white-dark 2s ease-in-out infinite alternate;
      }
    }


    /* --- 2. 应用样式 --- */
    #loading-overlay {
      position: fixed; top: 0; left: 0; width: 100%; height: 100%;
      /* 使用变量 */
      background-color: var(--loading-bg);
      z-index: 9999;
      display: flex; flex-direction: column;
      align-items: center; justify-content: center;
      opacity: 1; visibility: visible;
      transition: opacity 0.5s ease-out, visibility 0.5s ease-out;
    }

    body.loaded #loading-overlay {
      opacity: 0; visibility: hidden; pointer-events: none;
    }

    /* 使用变量设置文本颜色和动画 */
    #hp-span {
      color: var(--hp-text-color);
      animation: var(--hp-glow-animation);
    }
    #vision-span {
      color: var(--vision-text-color);
      animation: var(--vision-glow-animation);
    }
    #loading-text {
      color: var(--subtext-color);
      transition: opacity 0.4s ease-in-out;
    }

    /* 发光动画 (深色主题) */
    @keyframes glow-red-dark {
      from { text-shadow: 0 0 5px #f8b3b6, 0 0 10px #d71820, 0 0 15px #d71820; }
      to { text-shadow: 0 0 10px #f8b3b6, 0 0 20px #e8454f, 0 0 25px #e8454f; }
    }
    @keyframes glow-white-dark {
      from { text-shadow: 0 0 5px #e5e7eb, 0 0 10px #d1d5db, 0 0 15px #d1d5db; }
      to { text-shadow: 0 0 10px #e5e7eb, 0 0 20px #9ca3af, 0 0 25px #9ca3af; }
    }

    /* 发光动画 (浅色主题) */
    @keyframes glow-red-light {
      from { text-shadow: 0 0 3px #fecaca, 0 0 6px #f87171; }
      to { text-shadow: 0 0 5px #fecaca, 0 0 10px #ef4444; }
    }
    @keyframes glow-dark-light {
      from { text-shadow: 0 0 3px #d1d5db, 0 0 6px #9ca3af; }
      to { text-shadow: 0 0 5px #d1d5db, 0 0 10px #6b7280; }
    }

    /* 下划线进度条 */
    .vision-text {
      position: relative;
    }
    .vision-text::after {
      content: '';
      position: absolute;
      left: 0;
      bottom: -8px;
      width: 100%;
      height: 2px;
      /* 使用变量 */
      background-color: var(--underline-color);
      transform: scaleX(0);
      transform-origin: left;
      animation: draw-underline 2.5s ease-out forwards;
    }
    @keyframes draw-underline {
      to { transform: scaleX(1); }
    }
  </style>
</head>
<body>

<!-- 加载动画层 -->
<div id="loading-overlay">
<!--  <div class="whitespace-nowrap font-bold italic text-5xl-->
<!--   text-center select-none -0skew-x-[6deg]" style="font-family: 'Montserrat', sans-serif;">-->
<!--    &lt;!&ndash; MODIFIED: 移除了颜色和动画类, 添加了ID &ndash;&gt;-->
<!--    <span id="hp-span">HP</span>-->
<!--    <span id="vision-span" class="vision-text">VISION</span>-->
<!--  </div>-->

  <!-- 动态加载文案 -->
  <p id="loading-text" class="mt-8 text-sm tracking-wider font-sans"></p>
</div>

<!-- 主应用挂载点 -->
<div id="app"></div>

<script>
  // 初始化页面标题和图标
  document.getElementById("name").innerText = ' ';
  document.getElementById("hpyLogo").href = '<%= BASE_URL %>favicon.ico';

  // --- 动态加载文案逻辑 ---
  const loadingTextElement = document.getElementById('loading-text');
  const messages = [
    '正在加载资源文件...',
    '正在初始化核心模块...',
  ];
  let messageIndex = 0;
  let textInterval;

  function updateLoadingText() {
    // 淡出
    loadingTextElement.style.opacity = '0';

    setTimeout(() => {
      // 更新文字
      messageIndex = (messageIndex + 1) % messages.length;
      loadingTextElement.innerText = messages[messageIndex];
      // 淡入
      loadingTextElement.style.opacity = '1';
    }, 400); // 等待淡出动画完成
  }

  // 立即显示第一条消息并开始循环
  loadingTextElement.innerText = messages[0];
  textInterval = setInterval(updateLoadingText, 2000); // 每2秒切换一次

  // --- 监听加载完成事件，并停止动画 ---
  const observer = new MutationObserver((mutations) => {
    for (const mutation of mutations) {
      if (mutation.attributeName === 'class' && document.body.classList.contains('loaded')) {
        clearInterval(textInterval); // 停止文字切换
        observer.disconnect(); // 停止监听
        break;
      }
    }
  });

  // 开始监听 body 元素的 class 属性变化
  observer.observe(document.body, { attributes: true });

</script>
</body>
</html>
